<!-- *************
 *@description:下半部分第四个图表
 *@author:rennan
 *@date: 2023-07-19 16:16:58
 *@version: V1.0.0
 ************ -->
<template>
  <div id="b4_chart" style="height: 100%;"></div>
</template>

<script setup>
import { onMounted } from 'vue'
import { Bar } from '@antv/g2plot'

const data = [
  { 地区: '华东', 销售额: 4684506.442 },
  { 地区: '中南', 销售额: 4137415.0929999948 },
  { 地区: '东北', 销售额: 2681567.469000001 },
  { 地区: '华北', 销售额: 2447301.017000004 },
  { 地区: '西南', 销售额: 1303124.508000002 },
  { 地区: '西北', 销售额: 815039.5959999998 },
];

let options = {
  data,
  xField: '销售额',
  yField: '地区',
  label: {
    visible: true,
    formatter: (v) => Math.round(v / 10000) + '万',
  },
}

const initB4_chart = () => {
  let b4Bar = new Bar(document.getElementById('b4_chart'), options)

  b4Bar.render()
}

onMounted(() => {
  initB4_chart()
})
</script>

<style lang='scss' scoped></style>